<template>
    <div class="box">
        <header>
            <h1>数据可视化-ECharts 虚拟数据</h1>
        </header>
        <div class="container">
            <div class="column">
                <div class="panel bar">
                    <h2>柱状图-各行业程序员数量</h2>
                    <div class="chart">
                        <bar-chart></bar-chart>
                    </div>
                </div>
                <div class="panel line">
                    <h2>折线图-学习变化</h2>
                    <div class="chart">
                        <line-chart></line-chart>
                    </div>
                </div>
                <div class="panel">
                    <h2>饼形图-工程师年龄分布</h2>
                    <div class="chart">
                        <pie-chart></pie-chart>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="no">
                    <ul class="num">
                        <li class="left"></li>
                        <li class="right"></li>
                    </ul>
                    <ul class="title">
                        <li class="left"></li>
                        <li class="right"></li>
                    </ul>
                </div>
                <div class="map">
                    <div class="chart">
                        <map-chart></map-chart>
                    </div>
                    <div class="map1"></div>
                    <div class="map2"></div>
                    <div class="map3"></div>
                </div>
            </div>
            <div class="column">
                <div class="panel">
                    <h2>柱状图-开发技能</h2>
                    <div class="chart">
                        <reverse-bar-chart></reverse-bar-chart>
                    </div>
                </div>
                <div class="panel">
                    <h2>折线图-公司人员流动</h2>
                    <div class="chart">
                        <line-chart2></line-chart2>
                    </div>
                </div>
                <div class="panel">
                    <h2>饼形图-各地区程序员占比</h2>
                    <div class="chart">
                        <pie-chart2></pie-chart2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { run, unrun } from './js/flexiable'
import barChart from "@/components/Echarts/barChart.vue"
import lineChart from "@/components/Echarts/lineChart.vue"
import lineChart2 from "@/components/Echarts/lineChart2.vue"
import pieChart from "@/components/Echarts/pieChart.vue"
import pieChart2 from "@/components/Echarts/pieChart2.vue"
import reverseBarChart from "@/components/Echarts/reverseBarChart.vue"
import mapChart from "@/components/Echarts/map.vue"
export default {
    mounted() {
        run()
        // console.log(this.$refs.barchartbox.offsetHeight);// :height="$refs.barchartbox.offsetHeight"
    },
    beforeDestroy() {
        unrun()
    },
    data() {
        return {

        }
    },
    methods: {

    },
    components: {
        barChart,
        lineChart,
        lineChart2,
        pieChart,
        pieChart2,
        reverseBarChart,
        mapChart
    },
    computed: {
    }
}
</script>

<style lang="scss" scoped>
@import "./scss/index.scss";
</style>